<script setup>
import { getOrderService } from '@/api/car';
import { onMounted } from 'vue'
import { ref } from 'vue'
import { useCartStore } from '@/stores/car';
const storeCart = useCartStore()

const words = ref({})
const getOrder = async() => {
   const res = await getOrderService(storeCart.words)
   words.value = res.data.result
   storeCart.tiems = res.data.result.countdown
//    console.log(res.data.result.countdown);
}
onMounted(() => {
    getOrder()
})
</script>


<template>
  <div class="xtx-pay-page w">
     <el-card style="max-width: 100%">
             <div class="success">
                <i class="iconfont icon-weixinzhifu"></i>
             </div>
             <p style="text-align: center; font-size: 20px;">订单支付成功！</p>
             <p style="color: #999; font-size: 12px; text-align: center">我们将尽快为您发货，收获期间请保持手机畅通</p>
             <div class="fangshi">
                <span>支付方式：</span> <span>在线支付</span>
             </div>
             <div class="money">
                <span>交付金额：</span> <span style="color: red; font-weight: bolder;">￥{{ words.payMoney?.toFixed(2)}}元</span>
             </div>
             <div class="btn" style="margin: 50px 0">
                <el-button type="success" size="large" @click="$router.push('/settlement')">查看订单</el-button>
                <el-button type="primary" size="large"  @click="$router.push('/home')">进入首页</el-button>
             </div>
             <p style="color: #999; font-size: 12px; text-align: center">温馨提示：不支持退货哦！</p>
        </el-card>
  </div>
</template>

<style scoped lang="scss">
.w{
    width: 1200px;
    margin: 0 auto;
}
.success{
  text-align: center;
  i{
    font-size: 60px;
    color: #04c15f;
  }
}
.fangshi,.money,.btn{
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
</style>